<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    定义语法:
        局部指令
            new Vue({
                directives:{指令名:配置对象}
            })

            或
            new Vue({
                directives:{指令名:回调函数}
            })

         全局指令
            Vue.directive{指令名:配置对象}
            或
            Vue.directive{指令名:回调函数}

     配置对象中常用的3个回调:
        bind:指令与元素成功绑定时调用
        inserted:指令所在元素被插入页面时调用
        update:指令所在模版结构被重写解析时调用

     备注
        指令定义时不加v-, 但使用时要加v-
        指令名如果是多个单词,要使用kebab-case命名方式,不要用驼峰式命名
-->

    <!--  准备好一个容器  -->
    <div id="root">
        <!--
            定义v-big, 与v-text类似,会吧绑定的数据放大10倍
            定义v-fbind,与v-bind功能类型,会让所绑定的input元素默认获取焦点
        -->
        <h2> 当前的n值是:<span v-text="n"></span></h2>
        <h2> 放大10倍后的n值是:<span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>

        <hr>
        <input v-fbind:value="n" type="text">
    </div>

    <div id="root2">
        <input type="text" v-fbind2:value="x">
    </div>
</body>

<script type="text/javascript">
    //全局自定义指令
    Vue.directive('fbind2', {
        //指令与元素成功绑定时(一上来)
        bind(element, binding) {
            console.log('fbind2-bind', this)
            element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            console.log('fbind2-inserted', this)
            element.focus()
        },
        //指令所在模板被重新解析时
        update(element, binding) {
            console.log('fbind2-update', this)
            element.value = binding.value
        }
    })

/*    Vue.directive('big-number', function (element, binding) {
        console.log('big', this)
        element.innerText = binding.value * 10
    })*/


    new Vue({
        el: "#root",
        data: {
            n: 1
        },
        directives: {
            //big函数何时会被调用? 1.指令与元素成功绑定时(一上来) 2.指令所在的模版被重新解析时
            // 'big-number'(element, binding) {
            //     //指令与元素成功绑定时调用
            //     element.innerText = binding.value * 10
            // },
            'big-number'(element, binding) {
                //注意 此处的this 是window
                console.log('big', this)
                element.innerText = binding.value * 10
            },
            fbind: {
                //指令与元素成功绑定时(一上来)
                bind(element, binding) {
                    console.log('fbind-bind', this)
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    console.log('fbind-inserted', this)
                    element.focus()
                },
                //指令所在模板被重新解析时
                update(element, binding) {
                    console.log('fbind-update', this)
                    element.value = binding.value
                }
            }
        }
    })

    new Vue({
        el: "#root2",
        data: {
            x: 1
        }
    })
</script>
</html>